<template>
    <div class="minW1060-auto bg-fff mt10">
        <div class="pad20">
            <el-row class="text-left">
                <div class="dlblock-mb20 mr10">
                    <span class="pr5" style="padding-left: 30px">机构名称</span>
                    <el-cascader
                            v-model="group"
                            :options="groupTree"
                            :props="{value: 'orgId', label: 'orgName', checkStrictly: true,expandTrigger:'hover'}"
                            style="width: 150px;"
                            :show-all-levels="false"
                            clearable
                    >
                    </el-cascader>
                </div>
                <div class="dlblock-mb20 mr10">
                    <span class="pr5" style="padding-left: 30px">职务名称</span>
                    <el-input class="pr5" v-model.trim="queryData.name" placeholder="请输入内容" style="width: 150px"
                              :maxlength="20"  clearable></el-input>
                </div>
                <div class="dlblock-mb20 pr5 pl5">
                    <el-button @click="pages.page = 1; getDutyFn();" class="el-icon-search ml5"
                               circle></el-button>
                </div>
                <div class="dlblock-mb20 pl10">
                    <div class="dlblock-mb20 pr10 ml20">
                        <el-button :inline="true" type="primary" @click="addDutyFn()">新增</el-button>
                    </div>
                </div>
            </el-row>

            <el-table stripe class="my-table" :data="tableData"  :header-row-class-name="'my-table-header'" v-loading="loading" border>
                <el-table-column align="center" prop="id" label="序号" type="index" width="80"></el-table-column>
                <el-table-column align="center" prop="groupName" label="机构名称"></el-table-column>
                <el-table-column align="center" prop="deptName" label="部门名称"></el-table-column>
                <el-table-column align="center" prop="name" label="职务名称"></el-table-column>
                <el-table-column align="center" prop="remarks" label="描述"></el-table-column>
                <el-table-column align="center" prop="countPeople" label="人数(名)" width="180"></el-table-column>
                <el-table-column align="center" label="操作" fixed="right">
                    <template slot-scope="{row}">
                        <el-button :inline="true" type="text" @click="editDutyFn(row)">编辑</el-button>
                        <el-button type="text" style="color: #f56c6c" @click="deleteDutyFn(row.dutieId)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="my-pagination">
                <el-pagination background layout="total, prev, pager, next" :total="pages.total"
                               :current-page="pages.page" @current-change="pageChange">
                </el-pagination>
            </div>
        </div>
        <el-dialog :title="`编辑职务`" :visible.sync="editDutys" width="1400px" :close-on-click-modal="false" v-dialogDrag>

            <el-row :gutter="30" class="mt20">
                <el-form label-position="left" label-width="100px" :model="dutiesManagement"
                         ref="dutiesManagement">

                    <el-row>
                        <el-col align="left">
                            <h1 style="padding-left:40px">基本信息</h1>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col align="right">
                            <div class="dlblock-mb20 pr10 ml20">
                                <el-button type="primary" @click="updateDutyFn('dutiesManagement')">保存</el-button>
                            </div>
                            <div class="dlblock-mb20 ml20" style="padding-right: 80px !important;">
                                <el-button type="danger" @click="resetForm('dutiesManagement')">重置</el-button>
                            </div>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="6" :offset="2">
                            <el-form-item label="所属机构" prop="group" >
                                <el-cascader
                                        v-model="dutiesManagement.groupId"
                                        :options="groupTree"
                                        :props="{value: 'orgId', label: 'orgName', checkStrictly: true,expandTrigger:'hover'}"
                                        style="width: 249px;"
                                        :show-all-levels="false"
                                        clearable
                                        placeholder="请选择">
                                </el-cascader>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6" :offset="2">
                            <el-form-item label="职务名称" prop="name" :rules="required" >
                                <el-input v-model.trim="dutiesManagement.name" placeholder="请输入内容" :maxlength="20" show-word-limit
                                          clearable></el-input>
                            </el-form-item>
                        </el-col>

                    </el-row>
                    <el-row>
                        <el-col :span="6" :offset="2">
                            <el-form-item label="部门拼音" prop="pinyin" :rules="required">
                                <el-input v-model.trim="dutiesManagement.pinyin" placeholder="请输入内容" :maxlength="20" show-word-limit
                                          clearable></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6" :offset="2">
                            <el-form-item label="拼音缩写" prop="abbr" :rules="required">
                                <el-input v-model.trim="dutiesManagement.abbr" placeholder="请输入内容" :maxlength="20" show-word-limit
                                          clearable></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row style="padding-bottom: 100px">
                        <el-col :span="6" :offset="2">
                            <el-form-item label="所属部门" prop="deptId" :rules="required">
                                <el-select v-model="dutiesManagement.deptId" filterable placeholder="请选择" clearable
                                           style="width: 249px">
                                    <el-option v-for="(item,index) in dept"
                                               :key="index"
                                               :label="item.name"
                                               :value="item.deptId">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6" :offset="2">
                            <el-form-item label="职务描述" prop="remarks">
                                <el-input v-model.trim="dutiesManagement.remarks" placeholder="请输入内容" :maxlength="30" show-word-limit
                                          clearable></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </el-row>
        </el-dialog>
    </div>
</template>

<script>
    import {
        getDuty,deleteDuty,getGroupTree,allDept,updateDuty
    } from '@/api'
    import {} from '@/utils/config'
    import vPinyin from "../../../utils/vue-py";

    export default {
        name: 'User',
        data() {
            return {
                group: '',
                groupTree: [],
                date: [],
                checked: false,
                tableData: [],
                loading: false,
                editDutys:false,
                queryData:{
                    groupId:'',
                    name: '',
                },
                dutiesManagement:{
                    dutieId:'',
                    groupName:'',
                    groupId:'',
                    countPeople:'',
                    name:'',
                    remarks:'',
                    deptId:'',
                    deptName:'',
                    pinyin:'',
                    abbr:'',
                },
                dept:[],
                pages: {
                    page: 1,
                    total: 0,
                    size: 15,
                },
                required: {
                    required: true,
                    message: '此输入框必填',
                    trigger: 'blur'
                },
            }
        },
        created() {
            this.getDutyFn();
            this.getGroupTreeFn();
            this.getDepartmentsFn();
        },
        watch: {
            'dutiesManagement.name': {
                handler(newValue, oldValue) {
                    if (this.dutiesManagement.flags != 1) {
                        this.dutiesManagement.pinyin = vPinyin.chineseToPinYin(this.dutiesManagement.name)
                        let SX = '';
                        for (var i = 0; i < this.dutiesManagement.pinyin.length; i++) {
                            var c = this.dutiesManagement.pinyin.charAt(i);
                            if (/^[A-Z]+$/.test(c)) {
                                SX += c;
                            }
                        }
                        this.dutiesManagement.abbr = SX;
                    }
                }
            },

        },
        methods: {
            //获取职务
            getDutyFn() {
                this.loading=true
                this.queryData.groupId=this.group.length ? this.group[this.group.length - 1] : ''
                console.log(this.queryData.groupId)
                getDuty({
                    pageNum: this.pages.page,
                    groupId:this.queryData.groupId,
                    name:this.queryData.name,
                }).then(res => {
                    this.tableData = res.data.list
                    this.pages.total = res.data.count
                }).finally(this.loading=false)
            },

            //删除职务
            deleteDutyFn(data){
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    deleteDuty({
                        dutyId:data
                    }).then(res => {
                        if (res != null && res.code == 200) {
                            this.$message.success("删除成功")
                            this.getDutyFn()
                        } else {
                            this.$message.info("删除失败")
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            //添加职务按钮
            addDutyFn(){
                this.editDutys = true
                this.dutiesManagement.name =''
                this.dutiesManagement.dutieId=''
                this.dutiesManagement.groupName=''
                this.dutiesManagement.groupId=''
                this.dutiesManagement.countPeople=''
                this.dutiesManagement.remarks=''
                this.dutiesManagement.deptId=''
                this.dutiesManagement.deptName=''
                this.dutiesManagement.pinyin=''
                this.dutiesManagement.abbr=''
            },
            //编辑职务按钮
            editDutyFn(row){
                this.editDutys = true
                this.dutiesManagement = row
            },
            updateDutyFn(formName){
                if (this.dutiesManagement.groupId.hasOwnProperty('length')) {
                    if (this.dutiesManagement.groupId.length != 0) {
                        this.dutiesManagement.groupId = this.dutiesManagement.groupId[this.dutiesManagement.groupId.length - 1]
                    }
                }
                if (this.dutiesManagement.groupId==null||this.dutiesManagement.groupId==''){
                    return  this.$message.error("请选择分组!")
                }
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        updateDuty({
                            dutieId: this.dutiesManagement.dutieId,
                            groupId: this.dutiesManagement.groupId,
                            name: this.dutiesManagement.name,
                            remarks: this.dutiesManagement.remarks,
                            deptId: this.dutiesManagement.deptId,
                            pinyin: this.dutiesManagement.pinyin,
                            abbr: this.dutiesManagement.abbr,
                        }).then(res => {
                            if (res.code == 200) {
                                this.$message.success("保存成功")
                                this.getDutyFn();
                                this.editDutys = false
                               }
                        }).catch(err => {
                            this.$message.error("保存失败")
                        })
                    } else {
                        return false;
                    }
                });
            },
            //查询部门
            getDepartmentsFn() {
                allDept({}).then(res => {
                    if (res.code == 200) {
                        this.dept = res.data
                        console.log(this.dept)
                    }
                })
            },
            //获取分组
            getGroupTreeFn(){
                getGroupTree({}).then(res =>{
                    if (res.code==200){
                        this.groupTree =res.data.children
                    }
                })
            },
            //分页控件
            pageChange(val) {
                this.pages.page = val
                this.getDutyFn()
            },
            //重置
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
        }
    }
</script>

<style scoped>
    .my-table /deep/ tr, .my-table /deep/ td{
        padding: 0 !important;
        height: 50px;
        line-height: 50px;
    }

</style>
